import { defineComponent, reactive } from "vue";
import { useRouter } from "vue-router";
import styles from "./BranchList.module.less";
import {
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { message, Modal } from "ant-design-vue";
export default defineComponent({
  name:'userCenterBranchList',
  setup() {
    const router = useRouter();
    // 跳转路由path
    const toPath = (path: string) => {
      router.push(path);
    }
    const navs = reactive({
      list: [
        {
          text: '已关联',
        },
        {
          text: '待确认',
        },
      ],
      navsActived: 0,
    })
    const navClick = (index: number) => {
      navs.navsActived = index
    }
    //导航栏
    const Navs = () => (
      <div class={styles.navs}>
        {
          navs.list.map((item: any, index: number) => (
            <div class={styles['navs-item']} onClick={() => { navClick(index) }}>
              <span class={[index === navs.navsActived && styles['nav-item-actived'],
              index !== navs.navsActived && styles['nav-item-noActived']]}
              >{item.text}</span>
            </div>
          ))
        }
      </div>
    )
    const state = reactive({
      serach: '',
      num: 0,
      columns: [
        {
          title: "编号",
          dataIndex: "id",
          key: "id",
          align: "center",
          width: "50px",
        },
        {
          title: "分社或下属机构名称",
          dataIndex: "travelAgency",
          align: "center",
          width: "160px",
        },
        {
          title: "机构联系人",
          dataIndex: "realname",
          align: "center",
          width: "80px",
        },
        {
          title: "联系人手机号(用户名)",
          dataIndex: "mobile",
          align: "center",
          width: "100px",
        },
        {
          title: "统一社会信用代码",
          dataIndex: "businessLicense",
          align: "center",
          width: "100px",
        },
        {
          fixed: "right",
          title: "操作",
          dataIndex: "operation",
          align: "center",
          width: "100px",
        },
      ],
      dataSource: [],
      pagination: {
        total: 1,
        current: 1,
        pageSize: 10,
      },
      loading: false,
    })
    return () => (
      <div class={styles.branchList}>
        <div class={styles['header-box']}>分社关联</div>
        <div class={styles.container}>
          {/* <Navs /> */}
          <div class={styles['table-title-box']}>
            <div class={styles['table-title']}>
              <div class={styles['input-box']}>
                <input v-model={state.serach} placeholder='分社或下属机构单位名称' />
              </div>
              <div class={styles['search-btn']}>搜索</div>
              {
                navs.navsActived === 0 ? <div class={styles.word}>您已关联 <span>{state.num}家</span> 分社/下属机构</div> :
                  <div class={styles.word}>您有 <span>{state.num}家</span> 待关联分社/下属机构待对方确认关联</div>
              }
            </div>
            <div class={styles['add-btn']} onClick={() => { toPath('/userCenter/BranchAssociation') }}>新增分社</div>
          </div>
          <div class={styles.table}>
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
              pagination={state.pagination}
              loading={state.loading}
              v-slots={{
                bodyCell: ({ column, record }: any) => {
                  // 操作栏
                  if (column.dataIndex === "operation") {
                    return (
                      <div class={styles['operate']}>
                        <a-button
                          type="primary"
                          size="small"
                          v-slots={{
                            icon: () => <DeleteOutlined />,
                          }}
                          onClick={() => {
                            Modal.confirm({
                              title: '提示',
                              icon: () => <ExclamationCircleOutlined />,
                              content: '确认删除关联分社?',
                              onOk: () => {
                                message.success('删除成功');
                              }
                            })
                          }}
                        >编辑分社</a-button>
                        <a-button
                          type="primary"
                          danger
                          style={{ marginTop: '5px' }}
                          size="small"
                          v-slots={{
                            icon: () => <DeleteOutlined />,
                          }}
                          onClick={() => {
                            Modal.confirm({
                              title: '提示',
                              icon: () => <ExclamationCircleOutlined />,
                              content: '确认删除关联分社?',
                              onOk: () => {
                                message.success('删除成功');
                              }
                            })
                          }}
                        >删除分社</a-button>
                      </div>
                    );
                  }
                },
              }}
            ></a-table>
          </div>
        </div >
      </div >
    )
  }
})